import { Row, Col, Card, Grid } from 'antd';
import Mcard from './mcard';
import Mtable from './mtable';
const { useBreakpoint } = Grid;

export default (props) => {

  const screens = useBreakpoint();


  return <div>
    {
      screens.xs ?
        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
          {
            props.children &&
            <div style={{ marginBottom: 12 }}>
              {
                props.children
              }
            </div>
          }
          <div>
            <Mcard {...props} />
          </div>
        </div>
        :
        props.withCard === false ?
          <div style={{ display: "flex" }}>
            <div style={{ flex: 1 }}>
              {
                props.childposition == "top" && props.children
              }
              <Mtable {...props} />
            </div>

            {
              (props.childposition == "right" || !props.childposition) && props.children
            }

          </div> :
          <Card
            bordered={props.bordered === false ? false : true}
            style={{ height: "100%" }}
            title={props.pagetitle || null}
            extra={props.pageextra || null}
            activeTabKey={props.activeTabKey}
            tabList={props.tabList}
            onTabChange={props.onTabChange}
          >
            <div style={{ display: "flex" }}>
              <div style={{ flex: 1 }}>
                {
                  props.childposition == "top" && props.children
                }
                <Mtable {...props} />
              </div>
              {
                (props.childposition == "right" || !props.childposition) && props.children
              }

            </div>
          </Card>
    }
  </div>
}